<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>全省余额（企）</title>
    <link rel="stylesheet" href="/static/bower_components/weui/dist/style/weui.min.css"/>
    <link rel="stylesheet" href="/static/css/example.css?v=0.1.2"/>
  </head>
  <body>
    <div class="container" id="container">
      <div class="page">
        <div class="page__hd">
          <h1 class="page__title">总量 {{ total }} 亿元</h1>
          <p class="page__desc">最新数据截止日期 {{ qdate }}</p>
        </div>
        <div class="chart">
          <canvas id="myChart" height="150px"></canvas>
        </div>
        <div class="weui-grids">
          {% for r in records %}
          <a href="/show_dist/{{ r.id }}/{{ qdate }}" class="weui-grid">
            <p class="weui-grid__title">{{ r.name }}{% if r.no <= 3 %}<span class="weui-badge" style="position: absolute;top: 10px;right: 10px;">{{ r.no }}</span>{% endif %}</p>
            <p class="weui-grid__label">{{ r.bal }}亿</p>
          </a>
          {% endfor %}
        </div>
      </div>

    </div>
    <script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/static/bower_components/chart.js/dist/Chart.js"></script>
    <script>
      $(document).ready(function() {
        var ctx = $("#myChart").get(0).getContext('2d');
        var myLineChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: {{ prov_date|safe }},
            datasets: [{
                data: {{ prov_bals }},
                fill: false,
                borderColor: "rgb(75, 192, 192)",
                lineTension: 0.1
            }]
          },
          options: {
            legend: {
                display: false
            }
          }
        });
      });
    </script>
  </body>
</html>
